<template>
  <el-card>
    <div slot="header" class="header">
      <span>商品分类</span>
      <el-button type="primary" size="small" @click="addGoodsList"
        >添加分类</el-button
      >
    </div>

    <div class="content">
      <!-- 表格 -->
      <el-table :data="tableData">
        <!-- 序号 -->
        <el-table-column label="序号" type="index"></el-table-column>
        <!-- 分类名称 -->
        <el-table-column label="分类名称">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-if="scope.row.canEdit"
              v-model="scope.row.cateName"
            ></el-input>
            <span v-else>
              {{ scope.row.cateName }}
            </span>
          </template>
        </el-table-column>
        <!-- 是否启用 -->
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch
              :disabled="scope.row.canEdit ? false : true"
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#cccccc"
            >
            </el-switch>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.canEdit ? 'success' : 'primary'"
              @click="handleEdit(scope.row)"
              >{{ scope.row.canEdit ? "完成" : "编辑" }}</el-button
            >
            <el-button type="danger" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
      >
      </el-pagination>
      <!-- 模态框 -->
      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="form.cateName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" :label-width="formLabelWidth">
            <!-- 开关 -->
            <el-switch
              v-model="state"
              active-color="#13ce66"
              inactive-color="#ccc"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="confirm">取 消</el-button>
          <el-button type="primary" @click="confirm"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
//引入ajax
import {
  getGoodsCate,
  UpdateGoodsCate,
  delGoodsCategories,
  goodsAddcate,
} from "../../api/goods";
export default {
  data() {
    return {
      tableData: [], //表格数据
      currentPage: 1, //当前页
      pageSize: 5, //每页条数
      total: 0, //总页数
      dialogFormVisible: false, //对话框状态
      form: {
        cateName: "", //对话框数据
      },
      formLabelWidth: "120px",
      state: true, //对话框开关的状态
    };
  },
  methods: {
    //模态框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //获取数据函数
    async getData() {
      let res = await getGoodsCate({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      // console.log(res.data, "ggg");
      //解构
      let { total, data } = res.data;

      //处理数据格式
      data.forEach((v) => {
        // v.state=v.state==1?true:false
        v.canEdit = false; //每一行数据  都添加一个是否能够被编辑的字段
      });

      // 赋值渲染
      this.total = total;
      this.tableData = data;
    },
    //添加分类按钮
    addGoodsList() {
      this.dialogFormVisible = true; //开启对话框
    },
    //添加分类发送的ajax
    async confirm() {
      // 如果有值则发送ajax
      if(this.form.cateName){
        let res = await goodsAddcate({
        cateName: this.form.cateName,
        state:this.state,
        
      })
       if (res.data.code === 0) {
        this.$message.success(res.data.msg);

        this.getData(); //重新更新页面
        this.dialogFormVisible = false; //关闭对话框
        (this.form.cateName = ""), //初始化模态框数据
          (this.state = false); //初始化开关状态
      }else {
        this.$message.error("请先填写分类名称");
      }
      }
     // 刷新数据
        this.getData()
    },

    //编辑
    async handleEdit(row) {
      row.canEdit = !row.canEdit;
      //点击的是完成
      if (!row.canEdit) {
        console.log("sss", row);
        let res = await UpdateGoodsCate({
          id: row.id,
          cateName: row.cateName,
          state: row.state,
        });
      }
    },
    //删除
    async handleDelete(row) {
      let res = await delGoodsCategories({ id: row.id });
      // console.log(res.data);
      //解构
      // let {code,msg} =res.data
      //  if(code===0){
      //     this.$message({
      //       type:'success',
      //       message:msg
      //     })
      //  }else{
      //   this.$message.error(msg)
      //  }
      //  this.getData()
    },

    //当前页码改变
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
  },
  //生命周期
  created() {
    this.getData(
       (this.dialogFormVisible = false) //对话框状态
    );
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-pagination {
  margin-top: 30px;
}
/* 添加分类的按钮 */
// .isPreserve{

// }
</style>